<template>
<ScreenAdapter :width="1920" :height="1080">
    <div class="index">
        <div class="index_title">
            <span>疫情实时数据</span>
            <el-radio-group v-model="choose" >
                <el-radio-button label="1">海外</el-radio-button>
                <el-radio-button label="2">国内</el-radio-button>
                <el-radio-button label="3">江苏</el-radio-button>
                <el-radio-button label="4">苏州</el-radio-button>
            </el-radio-group>
        </div>
      
        <su-zhou v-if="choose==4"></su-zhou>
        <div class="index_map" v-if="choose==1||choose==2||choose==3">
            <div class="first">
               <world-map v-if="choose==1"></world-map>
               <china-map v-if="choose==2"></china-map>
               <jiangsu-map v-if="choose==3"></jiangsu-map>
               <suzhou-map v-if="choose==4"></suzhou-map>
               
            </div>
            <div class="second">
                <div class="index_map_right">
                    <div class="item">
                        <div class="title">
                            <span>累计确诊&nbsp;</span>
                            <i class="iconfont icon-wenti"></i>
                        </div>
                        <h2 class="num" v-if="choose==1">204195338</h2>
                        <h2 class="num" v-else-if="choose==2">121845</h2>
                        <h2 class="num" v-else-if="choose==3">1407</h2>
                        <div class="text">
                            <span>周同比</span>
                            <span class="week">12% &nbsp;</span>
                            <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi"></i>
                            
                            <span class="day">日环比</span>
                            <span >11% &nbsp;&nbsp;</span>
                            <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy"></i>
                        </div>
                        <div class="border"></div>
                        <div class="yes_add">
                            <span>昨日新增&nbsp;&nbsp;</span>
                            <span v-if="choose==1">654131</span>
                            <span v-else-if="choose==2">153</span>
                            <span v-else-if="choose==3">50</span>   
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span>现有确诊&nbsp;&nbsp;</span>
                            <i class="iconfont icon-wenti"></i>
                        </div>
                        <h2 class="num" v-if="choose==1">23203099</h2>
                        <h2 class="num" v-else-if="choose==2">3671</h2>
                        <h2 class="num" v-else-if="choose==3">634</h2>
                        <div class="ploy">
                            <img src="../assets/img/11.png" alt="">
                        </div>
                        <div class="border"></div>
                        <div class="yes_add">
                            <span>昨日新增&nbsp;&nbsp;</span>
                            <span v-if="choose==1">139572</span>
                            <span v-else-if="choose==2">75</span>
                            <span v-else-if="choose==3">47</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span v-if="choose==1||choose==3">累计死亡&nbsp;&nbsp;</span>
                            <span v-else-if="choose==2">累计境外输入&nbsp;&nbsp;</span>
                            <!-- <span v-else-if="choose==3">累计死亡&nbsp;&nbsp;</span> -->
                            <i class="iconfont icon-wenti"></i>
                        </div>
                        <h2 class="num" v-if="choose==1">4313274</h2>
                        <h2 class="num" v-else-if="choose==2">7709</h2>
                        <h2 class="num" v-else-if="choose==3">0</h2>
                        <div class="bar">
                            <img src="../assets/img/22.png" alt="">
                        </div>
                        <div class="border"></div>
                        <div class="yes_add">
                            <span>昨日新增&nbsp;&nbsp;</span>
                            <span v-if="choose==1">8156</span>
                            <span v-else-if="choose==2">35</span>
                            <span v-else-if="choose==3">0</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span v-if="choose==1">死亡率</span>
                            <span v-else-if="choose==2">治愈率</span>
                            <span v-else-if="choose==3">治愈率</span>
                        </div>
                        <h2 class="num" v-if="choose==1">2.1%</h2>
                        <h2 class="num" v-else-if="choose==2">98.2%</h2>
                        <h2 class="num" v-else-if="choose==3">100%</h2>
                        <div class="progress">
                            <img   v-if="choose==1" src="../assets/img/44.png" alt="">
                            <img  v-else-if="choose==2" src="../assets/img/33.png" alt="">
                            <img  v-else-if="choose==3" src="../assets/img/55.png" alt="">
                        </div>
                        <div class="border"></div>
                        <div class="text">
                            <span>周同比</span>
                            <span class="week">12% &nbsp;</span>
                             <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi"></i>
                            <span class="day">日环比</span>
                            <span >11% &nbsp;</span>
                             <i class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="index_data" v-if="choose==1||choose==2||choose==3">
            <div class="item">
                <abroad-yes-add v-if="choose==1"></abroad-yes-add>
                <yes-add-ploy v-else-if="choose==2"></yes-add-ploy>
                <jiangsu-yes-add v-else-if="choose==3"></jiangsu-yes-add>
            </div>
            <div class="item">
                <abroad-epidemic-distribute v-if="choose==1"></abroad-epidemic-distribute>
                <epidemic-distribute v-else-if="choose==2"></epidemic-distribute>
                <jiangsu-epidemic-distribute v-else-if="choose==3"></jiangsu-epidemic-distribute>
            </div>
            <div class="item">
                <lastest-development></lastest-development>
            </div>
        </div>
    </div>
</ScreenAdapter>
</template>

<script >
import SuZhou from '../components/Suzhou/Suzhou.vue'

import ChinaMap from '../components/Map/ChinaMap.vue'
import JiangsuMap from '../components/Map/JiangsuMap.vue'
import SuzhouMap from '../components/Map/SuzhouMap.vue'
import WorldMap from '../components/Map/WorldMap.vue'

import YesAddPloy from '../components/Ecahrts/yes_add.vue'
import AbroadYesAdd from '../components/Ecahrts/abroad_yes_add.vue'
import JiangsuYesAdd from '../components/Ecahrts/Jiangsu_yes_add.vue'

import AbroadEpidemicDistribute from '../components/Ecahrts/abroad_epidemic_distribute.vue'
import EpidemicDistribute from '../components/Ecahrts/epidemic_distribute.vue'
import JiangsuEpidemicDistribute from '../components/Ecahrts/Jiangsu_epidemic_distribute.vue'

import LastestDevelopment from '../components/Ecahrts/lastest_development.vue'
import ScreenAdapter from '../components/common/ScreenAdapter.vue'

export default {
    components:{
        ChinaMap,
        JiangsuMap,
        SuzhouMap,
        WorldMap,
        YesAddPloy,
        AbroadYesAdd,
        JiangsuYesAdd,
        AbroadEpidemicDistribute,
        EpidemicDistribute,
        JiangsuEpidemicDistribute,
        LastestDevelopment,
        ScreenAdapter,
        SuZhou
    },
    data(){
        return{
            choose:4
        }
    },
    created(){
       
    },
    mounted(){
        
    },
    methods:{

    }
    
}
</script>

<style lang="less"  scoped>
.index{
    width: 100%;
    padding: 120px 54px 20px;
}

.index_title{
    color: #24c2ff;
    margin: 10px 0;
    span {
        margin-right: 10px;
    }
}

.index_map {
    display: flex;
    .first{
        flex: 1;
        background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
        border: 3px solid #24c2ff;
        margin-right: 20px;
    }
    .second{
        flex: 1;
        .index_map_right{
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 430px;
                height: 212px;
                background: linear-gradient(180deg,rgba(36,194,255,0.10), rgba(36,194,255,0.00));
                border: 3px solid #24c2ff;
                padding: 24px 20px;
                .title{
                    color: #24c2ff;
                }
                .num{
                    color: #FFE600;
                    font-size: 30px;
                    margin: 15px 0;
                }
                .text{
                    span{
                        font-size: 14px;
                        color: #24c2ff;
                    }
                    .week{
                        margin: 0 8px;
                    }
                    .day{
                        margin: 0 8px 0 110px;
                    }
                }
                .border{
                    width: 378px;
                    height: 1px;
                    margin: 20px 0 10px 0;
                    background: #04130f;
                }
                .yes_add{
                    color: #24c2ff;
                    font-size: 14px;
                }
                &:first-child{
                    margin:0 20px 20px 0;
                }
                &:nth-child(2){
                    margin-bottom: 20px;
                    .ploy{
                        width: 378px;
                        height: 21px;
    
                        img{
                            width: 100%;
                        }
                    }
                }
                &:nth-child(3){
                    margin-right: 20px;
                    .bar{
                        width: 378px;
                        img{
                            width: 100%;
                        }
                    }
                }
                &:last-child{
                    .progress{
                        width: 378px;
                        height: 25px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
    }
}
.index_data{
    margin-top: 20px;
    display: flex;
    .item{
        flex: 1;
        &:nth-child(2){
            margin: 0 20px;
        }
    }
}

.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi{
    font-size: 14px;
    color: #F5222D;
}
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy{
    font-size: 14px;
    color: #52C41A;
}





</style>



